<template>
  <!-- 线下技术交流讲座 -->
  <div class="lecture">
    <div class="lecture_result">
      <div class="title">
        <div class="name">申请结果</div>
        <div class="addFrom" @click="dialogTableVisible = true">新增申请</div>
      </div>
      <div class="fromTop">
        <div class="text">申请序号</div>
        <!-- <div class="text">展商</div> -->
        <div class="text">属性</div>
        <div class="text">申请人数</div>
        <div class="text">日期</div>
        <div class="text">会议室安排</div>
        <div class="text">开始时间</div>
        <div class="text">时长</div>
        <div class="text" style="flex:2.5;">会议主题</div>
        <div class="text">会议概述</div>
        <div class="text">主讲人</div>
        <div class="text equipment">申请设备</div>
        <div class="text">直播服务</div>
        <div class="text">摄像服务</div>
        <div>
          <!-- <span>状态</span> -->
          <el-select v-model="value" filterable placeholder="状态" multiple prefix="状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>会议资料</div>
      </div>
      <div class="fromItem" v-for="(item,index) in fromItemList" :key="index">
        <div class="serialNumber">{{index+1}}</div>
        <!-- <div>{{item.exhibitors}}</div> -->
        <div>{{item.attribute}}</div>
        <div>{{item.applications}}</div>
        <div>{{item.startTime|Date }}</div>
        <div>{{item.meetingRoom}}</div>
        <div>{{item.startTime|formatDate }}</div>
        <div>{{item.burningTime}}</div>
        <div style="flex:2.5;">{{item.meetingName}}</div>
        <div>{{item.introduction}}</div>
        <div>{{item.speaker}}</div>
        <div class="equipment">{{item.equipment}}</div>
        <div class="check">
          <i class="el-icon-check"></i>
        </div>
        <div class="check">
          <i class="el-icon-check"></i>
        </div>
        <div>{{item.sessionState}}</div>
        <div class="file">
          <a title="这是个文件1" style="cursor: pointer;">
            <img src="@/assets/world.png" alt />
          </a>
          <a title="这是个文件2" style="cursor: pointer;">
            <img src="@/assets/world.png" alt />
          </a>
        </div>
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="30"
      ></el-pagination>
    </div>

    <!-- 遮罩层内容 -->
    <el-dialog :visible.sync="dialogTableVisible" width="90%">
      <div class="lecture_openBox">
        <!-- 线下技术交流弹窗 - 表单填写 -->
        <div class="leftMax">
          <div class="top">
            <div class="topBox">
              <div class="topLeft">
                <div class="topTitle" style="display:flex;">
                  <div class="name1" style="display:flex;">
                    <span style="color:#004CB3;font-size:0.16rem;">会议主题</span>
                    <input style="outline:none;width:3rem;" v-model="theme" type="text" name id />
                  </div>
                  <div class="name2" style="display:flex;">
                    <span style="color:#004CB3;font-size:0.16rem;padding-left:0.3rem;">会议概述</span>
                    <input style="outline:none;width:7rem;" v-model="summary" type="text" name id />
                  </div>
                </div>
                <div class="title">会议室收费标准</div>
                <div class="from">
                  <el-table :data="tableData" border style="width: 100%">
                    <!-- 单选按钮，占这么宽干嘛，给他width="40"就行了 ，要想单击行，必须加上@row-click  和   highlight-current-row -->
                    <el-table-column
                      align="center"
                      fixed="left"
                      label="选用会议室"
                      width="100"
                      @row-click="handleClickRow"
                    >
                      <template scope="scope">
                        <!-- 这垃圾elementUI，多出一行序号的列，怎么办呢，在el-radio标签之间给他个nbsp 就好了（然后特么的虽然给了这个，但是样式还是有问题，所以最后加了个style，见下面） -->
                        <el-radio
                          style
                          :label="scope.$index"
                          @change.native="getCurrentRow(scope.row)"
                          v-model="radio"
                          :show-overflow-tooltip="false"
                        ></el-radio>
                      </template>
                    </el-table-column>
                    <el-table-column fixed prop="name" label="会议室面积"></el-table-column>
                    <el-table-column prop="province" label="容纳人数"></el-table-column>
                    <el-table-column prop="city" label="桌椅摆放形式"></el-table-column>
                    <el-table-column prop="address" label="价格(元/场)"></el-table-column>
                  </el-table>
                  <div
                    class="configure"
                    style="text-align: center;line-height:0.4rem;"
                  >会议室内配置（免费）：演讲台、主席台桌、签到桌、座椅、投影屏幕、扩音系统、两只有线话筒（10-30人会议室内无扩音系统、无投影屏幕）。</div>
                  <div
                    class="standard"
                    style="text-align: center;height:0.4rem;line-height:0.4rem;"
                  >投影机及屏幕收费标准</div>
                  <div class="header">
                    <p style="margin:0 100px 0 40px">设备名称</p>
                    <p>白板</p>
                    <p style="margin:0 40px 0 80px">无线话筒</p>
                    <p>
                      4000流明投影仪
                      （10-80人会议室）
                    </p>
                    <p style="margin:0 40px 0 90px">
                      5000流明投影仪
                      （120人会议室）
                    </p>
                    <p style="margin:0 40px 0 90px">
                      12000流明投影仪
                      （500人会议室）
                    </p>
                    <p>不用投影仪</p>
                  </div>
                  <div class="number">
                    <p style="margin:0 141px 0 40px">价格（元/场</p>
                    <p>免费</p>
                    <p style="margin:0 102px 0 151px">300</p>
                    <p>1200</p>
                    <p style="margin:0 186px 0 151px">1500</p>
                    <p>4500</p>
                  </div>
                  <div class="select">
                    <p style="margin:0 162px 0 34px;">选用会议室</p>
                    <el-checkbox v-model="checkedNo" :true-label="44" @change="selectValue"></el-checkbox>
                    <div class="danxuan" style="margin:0 93px 0 113px">
                      <el-checkbox v-model="checkedOne" @change="selectValue" :true-label="11">1支</el-checkbox>
                      <el-checkbox v-model="checkedTwo" @change="selectValue" :true-label="22">2支</el-checkbox>
                      <el-checkbox v-model="checkedThree" @change="selectValue" :true-label="33">不用</el-checkbox>
                    </div>
                    <el-checkbox v-model="checkedfour" @change="selectValue" :true-label="55"></el-checkbox>
                    <el-checkbox
                      v-model="checkedfive"
                      @change="selectValue"
                      :true-label="66"
                      style="margin:0 209px 0 139px"
                    ></el-checkbox>
                    <el-checkbox
                      v-model="checkedsix"
                      @change="selectValue"
                      :true-label="77"
                      style="margin:0 120px 0 0"
                    ></el-checkbox>
                    <el-checkbox v-model="checkedsevent" @change="selectValue" :true-label="88"></el-checkbox>
                  </div>
                  <div class="day minBox">
                    <div style="display: flex;border:none;">
                      <span>希望安排的日期</span>
                      <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                    </div>
                    <!-- <div style="display: flex;;border:none;">
                      <span>希望安排的时间</span>
                      <el-time-picker v-model="value2" placeholder="开始时间"></el-time-picker>
                    </div>-->
                    <el-radio-group v-model="radio2" style="display:flex;align-items:center;">
                      <!-- <span>直播服务</span> -->
                      <el-radio :label="3" size="medium" class="live" style="margin:0 40px 0 87px">
                        <span>直播服务</span>
                      </el-radio>
                      <el-radio :label="6" size="medium" class="shoot">
                        <span>摄像服务</span>
                      </el-radio>
                    </el-radio-group>
                  </div>
                  <div class="types" style="display:flex;">
                    <span class="one" style="line-height:0.4rem;margin-left:0.5rem;">会议属性</span>
                    <el-radio-group
                      @change="bimen"
                      v-model="radio3"
                      style="width:90%; display:flex;border:none;"
                    >
                      <el-radio :label="1" size="medium" style="margin:0 41px 0 41px">
                        <span>公开</span>
                      </el-radio>
                      <el-radio :label="2" size="medium" style="margin-right:72px;">
                        <span>审核观众身份</span>
                      </el-radio>
                      <el-radio :label="3" size="medium" class="bimen">
                        <span>闭门</span>
                        <div class="dialog" v-if="flags">
                          <el-form ref="form" :model="form" label-width="0.8rem">
                            <el-form-item label="活动名称">
                              <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="活动名称">
                              <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="活动名称">
                              <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-button type="primary" @click="onSubmit">确认</el-button>
                          </el-form>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="topRight">
                <div class="topTitle" style="display:flex;">
                  <span style="color:#004CB3;font-size:0.16rem;">主讲人</span>
                  <input type="text" v-model="host" style="width:1.7rem;outline:none;" name id />
                </div>
                <div class="title">添加海报</div>
                <div class="itemBox">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <button
                    size="small"
                    type="primary"
                    style="margin-top:0.1rem;cursor: pointer;"
                  >上传图片</button>
                </el-upload>
                <!-- 会议资料上传 -->
                <div class="title" style="margin-top:0.5rem;">会议资料上传</div>
                <div
                  class="itemBox"
                  style="width:2.2rem;height:1.8rem;border:0.01rem solid rgba(204,204,204,1);"
                ></div>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <button
                    size="small"
                    type="primary"
                    style="margin-top:0.1rem;cursor: pointer;"
                  >资料上传</button>
                </el-upload>
              </div>
            </div>

            <div class="submit dialog-footer" slot="footer">
              <button @click="add()">提交</button>
            </div>
          </div>
        </div>
        <!-- <div class="rightMax">
          <div class="add">
            <i class="el-icon-plus"></i>
          </div>
          <div class="text">点击添加列表</div>
        </div>-->
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import {
  price,
  cuss,
  technology,
  onlineLive,
  addedtechnology,
} from "../../request/home";

export default {
  name: "lecture",
  data() {
    return {
      radioMicrophone: "", //无线话筒
      radioPrice: "", //话筒价格
      board: "", //白板
      WhiteboardPrice: "", //白板价格
      roomPrice: "", //会议室价格
      checkedNo: "",
      checkedOne: "",
      checkedTwo: "",
      checkedThree: "",
      checkedfour: "",
      checkedfive: "",
      checkedsix: "",
      checkedsevent: "",
      room: "", //会议室
      tableData: [
        {
          date: "会议室面积",
          name: "42-53㎡",
          province: "10-30人",
          city: "桌椅摆放形式",
          address: "3500",
          zip: 200333,
        },
        {
          date: "容纳人数",
          name: "51㎡",
          province: "10-30人",
          city: "圆桌式",
          address: "3500",
          zip: 200333,
        },
        {
          date: "桌椅摆放形式",
          name: "74-89㎡",
          province: "50-60人",
          city: "剧院型",
          address: "5500",
          zip: 200333,
        },
        {
          date: "价格(元/场)",
          name: "95-109㎡",
          province: "80人",
          city: "剧院型",
          address: "6000",
          zip: 200333,
        },
        {
          date: "选用会议室",
          name: "309㎡",
          province: "120人",
          city: "剧院型",
          address: "8000",
          zip: 200333,
        },
        {
          date: "选用会议室",
          name: "795㎡",
          province: "500人",
          city: "课桌式",
          address: "18000",
          zip: 200333,
        },
      ],
      theme: "",
      summary: "",
      host: "",
      flags: false,
      form: {
        name: "",
      },
      radio: 3,
      radio1: 3,
      radio2: 3,
      radio3: 3,
      value1: "",
      value2: "",
      firstlist: [
        {
          name: "设备名称",
          name1: "白板",
          name2: "无线话筒",
          nmae3: "4000流明投影仪(10-80人会议室)",
          name4: "5000流明投影仪(120人会议室)",
          name5: "12000流明投影仪(500人会议室)",
          nmae6: "不用会议室",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "同意",
        },
        {
          value: "选项2",
          label: "审核中",
        },
        {
          value: "选项3",
          label: "未通过",
        },
      ],
      fromItemList: [],
      value: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      checked: true,
      fileList: [],
      imageUrl: "",
      // 表单标题
      fromTopList: [
        { text: "申请序号" },
        { text: "展商" },
        { text: "属性" },
        { text: "申请人数" },
        { text: "日期" },
        { text: "会议室安排" },
        { text: "开始时间" },
        { text: "时长" },
        { text: "会议主题" },
        { text: "会议概述" },
        { text: "主讲人" },
        { text: "申请设备" },
        { text: "直播服务" },
        { text: "摄像服务" },
      ],
      pagesize: 10,
      list: {},
      row: "",
      type: "",
    };
  },
  created() {
    console.log(this.isChecked);
  },
  mounted() {
    this.save();
    console.log(this.radio + "+" + this.radio1);
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return h + ":" + m;
    },
    Date: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
    },
  },
  methods: {
    selectValue(e) {
      if (e == "44") {
        this.board = "演讲台、主席台桌、签到桌、座椅、投影屏幕 白板";
        this.WhiteboardPrice = "免费"; //白板价格
      }
      if (e == "11") {
        this.board = "无线话筒";
        this.radioPrice = 300;
        this.checkedOne = true;
        this.checkedTwo = false;
        this.checkedThree = false;
      }
      if (e == "22") {
        this.board = "无线话筒";
        this.radioPrice = 300;
        this.checkedOne = false;
        this.checkedTwo = true;
        this.checkedThree = false;
      }
      if (e == "33") {
        this.board = "无线话筒";
        this.radioPrice = 300;
        this.checkedOne = false;
        this.checkedTwo = false;
        this.checkedThree = true;
      }
      if (e == "55") {
        this.board = "4000流明投影仪 （10-80人会议室）";
        this.roomPrice = 1200;
        this.checkedfour = true;
        this.checkedfive = false;
        this.checkedsix = false;
        this.checkedsevent = false;
      }
      if (e == "66") {
        this.roomPrice = 1500;
        this.board = "5000流明投影仪 （120人会议室）";
        this.checkedfour = false;
        this.checkedfive = true;
        this.checkedsix = false;
        this.checkedsevent = false;
      }
      if (e == "77") {
        this.roomPrice = 4500;
        this.board = "12000流明投影仪 （500人会议室）";
        this.checkedfour = false;
        this.checkedfive = false;
        this.checkedsix = true;
        this.checkedsevent = false;
      }
      if (e == "88") {
        this.roomPrice = 0;
        this.board = "不用投影仪";
        this.checkedfour = false;
        this.checkedfive = false;
        this.checkedsix = false;
        this.checkedsevent = true;
      }
    },

    bimen(row) {
      this.row = row;
    },
    getCurrentRow(row) {
      // 获取选中数据
      console.log(row);
      this.list = row;
      console.log(this.list.province);
    },
    handleClickRow(row) {
      console.log(row);
      this.radio = row.id;
      console.log(this.radio);
    },
    handleCurrentChange(val) {
      console.log(val);
      technology({ pageNum: val, pageSize: this.pagesize }).then((res) => {
        this.total = res.data.data.total;
        this.fromItemList = res.data.data.list;
        console.log(this.fromItemList);
        this.fromItemList.forEach((e) => {
          if (e.sessionState == 1) {
            e.sessionState = "同意";
          } else {
            e.sessionState = "审核中";
          }
          if (e.sessionState == 3) {
            e.sessionState = "未通过";
          }
        });
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    save() {
      technology({ pageNum: 1, pageSize: 10 }).then((res) => {
        this.fromItemList = res.data.data.list;
        this.fromItemList.forEach((e) => {
          if (e.sessionState == 1) {
            e.sessionState = "同意";
          } else {
            e.sessionState = "审核中";
          }
          if (e.sessionState == 3) {
            e.sessionState = "未通过";
          }
        });
      });
    },
    both(row) {
      this.type = row;
    },
    checkedState() {
      console.log(this.ISChecked);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      this.dialogTableVisible = false;
      var list = {
        id: 1,
        meetingName: this.theme,
        introduction: this.summary,
        speaker: this.host,
        chamberArea: this.list.name,
        applications: this.list.province,
        tablesPut: this.list.city,
        chamberPrice: this.list.address,
        equipment: this.board,
        equipmentPrice: this.radioPrice,
        srtingstartTime: this.value1,
        attribute: this.row,
        serviceType: this.type,
        formalOrTemporary: 1,
        meeState: 2,
        burningTime: "5",
      };
      addedtechnology(list).then((res) => {
        console.log(res);
        technology({ pageNum: 1, pageSize: 10 }).then((res) => {
          this.fromItemList = res.data.data.list;
        });
      });
    },
  },
};
</script>
 
<style lang="less" scoped>
.lecture {
  // 申请结果
  .lecture_result {
    // width: 15.8rem;
    // height: 8.4rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    margin-left: 0.3rem;
    padding: 0 0.47rem 1.65rem 0.3rem;
    box-sizing: border-box;
    .title {
      width: 1500px;
      font-size: 0.18rem;
      display: flex;
      justify-content: space-between;
      padding-top: 0.17rem;
      padding-bottom: 0.1rem;
      .name {
        color: #004cb3;
      }
      .addFrom {
        width: 1rem;
        // height:0.4rem;
        background: rgba(0, 76, 179, 1);
        border-radius: 0.05rem;
        color: #ffffff;
        line-height: 0.4rem;
        text-align: center;
        cursor: pointer;
      }
    }
    .fromTop {
      display: flex;
      width: 15rem;
      height: 0.5rem;
      // background:rgba(250,250,250,1);
      border: 0.01rem solid rgba(204, 204, 204, 1);
      div {
        font-size: 0.16rem;
        color: #333333;
        flex: 1;
        line-height: 0.5rem;
        text-align: center;
        // overflow: hidden;
      }
      .equipment {
        flex: 1.5;
      }
      /deep/ .el-input__inner {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 0.4rem;
        line-height: 0.4rem;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 50%;
      }
      /deep/ .el-input__icon {
        height: 0.4rem;
        width: 0.25rem;
        line-height: 0.4rem;
        text-align: center;
        transition: all 0.3s;
        line-height: 0.4rem;
      }
      /deep/ .offline_box .listBox[data-v-5adfdacc] .el-input__inner {
        height: 0.4rem !important;
        color: #000 !important;
        display: inline-block;
        height: 0.4rem;
        line-height: 0.4rem;
        z-index: 999999;
      }
      /deep/
        .offline_box
        .listBox
        .listTitle[data-v-5adfdacc]
        .el-input__inner {
        padding: 0 0.15rem;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 70%;
      }
      /deep/.el-input,
      .el-input--suffix {
        input {
          width: 70%;
          height: 0.3rem !important;
          // border-bottom: 0.01rem solid rgba(204, 204, 204, 1);
          color: #333333;
          font-size: 0.16rem;
        }
        ::-webkit-input-placeholder {
          /* WebKit, Blink, Edge */
          color: #333333;
          text-align: center;
        }
      }
    }
    .fromItem {
      display: flex;
      width: 15rem;
      height: 0.4rem;
      border-bottom: 1px solid #eeeeee;
      div {
        flex: 1;
        text-align: center;
        font-size: 0.14rem;
        color: #333333;
        line-height: 0.4rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .file {
        display: flex;
        a {
          margin: auto;
          margin-top: 0.05rem;
          img {
            width: 0.26rem;
            height: 0.3rem;
          }
        }
      }
      .equipment {
        flex: 1.5;
        line-height: 0.2rem;
        white-space: pre-wrap;
      }
      .check {
        i {
          color: rgb(214, 120, 12);
          font-weight: bold;
          font-size: 0.26rem;
        }
      }
    }
  }
}
// 线下技术交流弹窗
.lecture_openBox {
  height: 8rem;
  display: flex;
  overflow-y: scroll;

  .leftMax {
    width: 14.5rem;
    margin-left: 0.3rem;
  }
  .top {
    width: 15.8rem;
    height: 7.57rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    .topBox {
      display: flex;
    }
    .topLeft {
      width: 12rem;
      .title {
        width: 12rem;
        font-size: 0.16rem;
        font-weight: 400;
        color: rgba(0, 76, 179, 1);
        // line-height:0.3rem;
        padding-bottom: 0.1rem;
        text-align: center;
        padding-top: 0.3rem;
      }
      .from {
        width: 12rem;
        font-size: 0.16rem;
        color: #333333;
        .header {
          display: flex;
          width: 1200px;
          height: 80px;
          align-items: center;
          p {
            width: 240px;
          }
        }
        .number {
          width: 1200px;
          height: 40px;
          display: flex;
          align-items: center;
        }
        .select {
          width: 1200px;
          height: 80px;
          display: flex;
          align-items: center;
          .danxuan {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
        div {
          text-align: center;
          border: 1px solid rgba(204, 204, 204, 1);
          border-top: none;
          // margin-left: 0.18rem;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
        div:nth-child(1) {
          border-top: 1px solid rgba(204, 204, 204, 1);
        }
        .name {
          display: flex;
          align-items: center;
          height: 0.8rem;
          div {
            flex: 1;
            border: none;
            line-height: 0.4rem;
          }
        }
        .choice {
          display: flex;
          p,
          input {
            flex: 17%;
            align-items: center;
          }
          input {
            margin: auto 0;
          }
          /deep/ .el-radio-group {
            display: flex;
          }
          /deep/ .el-radio {
            margin-left: 0;
            flex: 1;
            margin-top: 10px;
            .el-radio__input {
              margin: auto;
            }
          }
        }
        .choice2 {
          display: flex;
          height: 0.8rem;
          p {
            line-height: 0.8rem;
            flex: 17%;
          }

          .moreChoice {
            flex: 1;
            display: inline-block;
            .moreTop {
              margin-top: 0.2rem;
              display: flex;
              /deep/ .el-radio {
                margin: 0;
                margin-left: 0.2rem;
              }
              /deep/ .el-radio:nth-child(2) {
                margin-left: -0.1rem;
              }
              /deep/ .el-radio__input {
                margin: 0;
              }
              /deep/ .el-radio__label {
                padding-left: 0px;
              }
            }
            /deep/ .morebot {
              /deep/ .el-radio {
                // flex: 5%;
                margin-top: 0.05rem;
                margin-left: 0.5rem;
                .el-radio__input {
                  padding-left: 0px;
                  margin: 0;
                  width: 0.3rem;
                }
                .el-radio__label {
                  padding: 0;
                }
              }
            }
          }
          // div,
          // input {
          //   flex: 10%;
          //   margin: auto 0;
          // }
          // div {
          //   border: none;
          //   p {
          //     height: 0.4rem;
          //     line-height: 0.4rem;
          //   }
          // }
          /deep/ .el-radio-group {
            display: flex;
          }
          /deep/ .el-radio {
            margin-left: 0;
            flex: 1;
            .el-radio__input {
              margin: auto;
            }
          }
        }
        .minBox {
          height: 0.4rem;
          line-height: 0.4rem;
          display: flex;
          text-align: center;
          span {
            flex: 1;
            text-align: center;
          }
          span:nth-child(1) {
            // text-align: left;
            // padding-left: 0.6rem;
          }
        }
        .day {
          display: flex;
          div {
            flex: 1;
            border: none;
          }
          .el-radio-group {
            /deep/ [data-v-4858ed07] .el-radio:last-child {
              margin-left: 0px;
              margin: auto;
            }
            .live {
              box-sizing: border-box;
              // padding-left: 0.5rem;
              padding-top: 0.1rem;
              /deep/ [data-v-4858ed07] .el-radio:last-child {
                margin-left: 0px !important;
              }
              /deep/ [data-v-4858ed07] .el-radio:nth-of-type(1) {
                margin-left: 0px;
              }
            }
            .shoot {
              padding-top: 0.1rem;
              box-sizing: border-box;
            }
          }
        }
        .types {
          p {
            margin-left: 0.27rem;
          }
          .bimen {
            position: relative;
            .dialog {
              position: absolute;
            }
          }
          // .one{
          //   margin-left: 0.27rem;
          // }
        }
        /deep/.el-input--prefix .el-input__inner {
          padding-left: 30px;
          font-size: 0.14rem;
          height: 0.4rem;
        }
        /deep/ .el-input__icon {
          height: 100%;
          width: 0.25rem;
          text-align: center;
          transition: all 0.3s;
          line-height: 0.4rem;
        }
      }
    }
    .topRight {
      width: 2.5rem;
      padding-left: 0.45rem;
      // border: 1px solid red;
      .title {
        font-size: 0.18rem;
        font-weight: 400;
        color: rgba(0, 76, 179, 1);
        padding-top: 0.25rem;
        text-align: center;
        padding-bottom: 0.1rem;
      }
      .itemBox {
        width: 2rem;
        height: 2rem;
        margin: 0 auto;
        .avatar-uploader .el-upload {
          border: 0.01rem dashed #d9d9d9;
          border-radius: 0.06rem;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 0.28rem;
          color: #8c939d;
          width: 2rem;
          height: 2rem;
          line-height: 1.78rem;
          text-align: center;
          border: 1px solid rgba(204, 204, 204, 1);
        }
        .avatar {
          width: 1.78rem;
          height: 1.78rem;
          display: block;
        }
      }
      button {
        margin: 0 auto;
        // width:0.9rem;
        height: 0.3rem;
        background: rgba(253, 95, 0, 1) !important;
        border-radius: 0.05rem;
        color: #fff;
        font-weight: bold;
        font-size: 0.16rem;
        outline: none;
        border: none;
        padding: 0 0.13rem;
      }
    }
    .submit {
      padding-top: 0.3rem;
      width: 100%;
      // background: chartreuse;
      // height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 1.6rem;
        height: 0.5rem;
        background: rgba(0, 76, 179, 1);
        border-radius: 0.05rem;
        border: none;
        outline: none;
        font-size: 0.18rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
      }
    }
  }
  .result {
    font-size: 0.18rem;
    width: 14.5rem;
    height: 0.8rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    line-height: 0.8rem;
    font-weight: 400;
    margin-top: 0.15rem;
    display: flex;
    div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .title {
      margin-left: 0.4rem;
      color: #e80037;
    }
    .position,
    .time,
    .remarks {
      font-size: 0.18rem;
      font-weight: 400;
      color: rgba(0, 76, 179, 1);
    }
    .position {
      padding-left: 0.45rem;
    }
    .time {
      padding-left: 0.5rem;
    }
    .remarks {
      padding-left: 0.66rem;
    }
  }
  .rightMax {
    margin-left: 0.1rem;
    width: 1.2rem;
    // height:8.44rem;
    border: 0.02rem solid rgba(221, 221, 221, 1);
    padding-top: 3rem;
    .add {
      width: 100%;
      text-align: center;
      i {
        width: 0.8rem;
        height: 0.8rem;
        font-size: 1rem;
        margin: auto;
        color: #ccc;
        line-height: 0.8rem;
      }
    }
    .text {
      font-size: 0.16rem;
      font-weight: 400;
      color: rgba(0, 76, 179, 1);
      line-height: 0.3rem;
      text-align: center;
    }
  }
}
.lecture_openBox::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
// /deep/.el-upload{
//     width: 50px;
//     height: 30px;
//     background: chartreuse;
// }
/deep/.upload-demo {
  display: flex;
  margin-left: 0.88rem;
}
/deep/.el-radio {
  display: flex;
  margin-right: 0px;
  align-items: center;
  justify-content: space-around;
}
/deep/.el-table__row {
  .cell {
    margin-right: 10px;
  }
}
</style>
